const a = document.querySelectorAll(' .a')
const dot = document.querySelectorAll(' .a i')
//点击改变高亮样式
for (let i = 0; i < a.length; i++) {
    a[i].addEventListener('click',function(){
        document.querySelector('.a.active').classList.remove('active')
        this.classList.add('active')
        //被点击的下标是i
        document.querySelector('.show').classList.remove('show')
        dot[i].classList.add('show')
    })
    a[9].classList.add('active')
    dot[9].classList.add('show')
}
//待付款30分钟倒计时
window.onload=function(){
    const countdown=document.querySelectorAll(".countdown");
    let time=1800;//30分钟换算成1800秒
    const timerId =  setInterval(function(){
        time=time-1;
        const minute=parseInt(time/60);
        const second=parseInt(time%60);
        for (let i = 0; i < countdown.length; i++) {
            countdown[i].innerHTML=minute+'分'+second+'秒';
        }
    },1000);
}
//订单数据
const productObj = [
    {
        picture:'https://yanxuan-item.nosdn.127.net/a5d745bbe067ca2468cdb2948f4f10ca.jpg',
        uname:'麦瑞克家用轻音智能多功能彩屏跑步机S450',
        specification:' 规格：多功能',
        style:' 款式：蓝屏',
        price: 2303.00,
        count: 1
    },
    {
        picture:'https://yanxuan-item.nosdn.127.net/a5d745bbe067ca2468cdb2948f4f10ca.jpg',
        uname:'麦瑞克家用轻音智能多功能彩屏跑步机S450',
        specification:' 规格：多功能',
        style:' 款式：蓝屏',
        price: 2303.00,
        count: 1
    },
    {
        picture:'https://yanxuan-item.nosdn.127.net/a5d745bbe067ca2468cdb2948f4f10ca.jpg',
        uname:'麦瑞克家用轻音智能多功能彩屏跑步机S450',
        specification:' 规格：多功能',
        style:' 款式：蓝屏',
        price: 2303.00,
        count: 1
    },
    {
        picture:'https://yanxuan-item.nosdn.127.net/a5d745bbe067ca2468cdb2948f4f10ca.jpg',
        uname:'麦瑞克家用轻音智能多功能彩屏跑步机S450',
        specification:' 规格：多功能',
        style:' 款式：蓝屏',
        price: 2303.00,
        count: 1
    }
]
//数据渲染页面
const order_list = document.querySelector('.order_list')
function orderProduct(arr,index) {
        // const {picture,uname,specification,style,price,count} = productObj[index]
        let str = ''
        for (let i = 0; i < arr.length; i++) {
            str += `
            <div class="order_box">
                <div class="order_top">
                    <span>
                        <span class="time">下单时间：2022-02-07 00:05:20</span>
                        <span>订单编号：62205697599</span>
                    </span>
                    <div><i class="toutiao icon-shijian-xianxing"></i>付款截止：<span class="countdown">30分00秒</span></div>
                </div>
                <div class="order_bottom">
                    <div class="product">
                        <div>
                            <img src="${arr[index].picture}" alt="">
                            <p>
                              ${arr[index].uname} <br>
                              <span>${arr[index].specification}</span>
                              <span>${arr[index].style}</span>
                            </p>
                            <span class="money">￥${arr[index].price}</span>
                            <span class="count">×${arr[index].count}</span>
                        </div>
                        <div>
                            <img src="${arr[index].picture}" alt="">
                            <p>
                            ${arr[index].uname} <br>
                                <span>${arr[index].specification}</span>
                                <span>${arr[index].style}</span>
                            </p>
                            <span class="money">￥${arr[index].price}</span>
                            <span class="count">×${arr[index].count}</span>
                        </div>
                    </div>
                    <div class="obligation">
                        <p>待付款</p>
                    </div>
                    <div class="order_price">
                        <p>￥${arr[index].price * (arr[index].count + arr[index].count)}</p>
                        <div>(含运费：￥10.00)</div>
                        <div>在线支付</div>
                    </div>
                    <div class="payment">
                        <button>立即付款</button>
                        <a href="#">查看详细</a>
                        <a href="#">取消订单</a>
                    </div>
                </div>
            </div>
        `
            
        }
        return str
}
for (let i = 0; i < productObj.length; i++) {
    order_list.innerHTML = orderProduct(productObj,i)
}

